…eature

Add 10 detailed implementation plan documents covering:
- Task 1: State management for auto-refresh status tracking
- Task 2: Auto-refresh status indicator component
- Task 3: Pause/resume controls
- Task 4: Tab visibility auto-pause
- Task 5: Spinner suppression during auto-refresh
- Task 6: FiltersBadge flickering fix
- Task 7: Toast notification suppression
- Task 8: Chart animation reduction
- Task 9: 5-second refresh interval option
- Task 10: Comprehensive testing & integration

These plans detail the codebase exploration, file modifications needed,
code examples, and testing strategies for implementing optimized
auto-refresh behavior for near real-time analytics dashboards.

- Add GAP_ANALYSIS.md documenting gaps between requirements and plans
- Fix Task 1: Add autoRefreshFetchStartTime for delay detection
- Fix Task 2: Change paused state to WHITE, add checkmark for success
- Fix Task 3: Add manual refresh icon behavior section

Update GAP_ANALYSIS.md to reflect that all 4 critical gaps have been
addressed in Tasks 1, 2, and 3:
- Paused state WHITE color (Task 2)
- Checkmark icon for success state (Task 2)
- Delayed state detection logic (Task 1)
- Manual refresh icon behavior (Task 3)

Second pass review of requirements identified and fixed additional gaps:

Task 1 fixes:
- Add SET_AUTO_REFRESH_FETCH_START_TIME action, creator, and reducer handler

Task 2 fixes:
- Update delayed tooltip to show fetch elapsed time per requirements
- Update error tooltip to show BOTH timestamp AND error message
- Add autoRefreshFetchStartTime to StatusTooltipContentProps

Task 3 fixes:
- Clarify pause button is REQUIRED in header (not optional)

Task 10 fixes:
- Fix paused state test to expect WHITE color (not yellow)
- Add E2E test for non-real-time dashboard (no status indicator)

Gap Analysis updated to mark all second-pass items as resolved.

Design decisions from the design team:

Question apache#4: Tab inactive status indicator
- Answer: YES - Always show white/paused state when tab inactive

Question apache#5: Error thresholds
- Answer: YES - Confirmed:
  - Delayed (Yellow): 1-2 errors OR fetch > 50% interval
  - Error (Red): 3+ consecutive errors

Question apache#6: Auto-pause configurability
- Answer: Configurable via checkbox in RefreshIntervalModal
  - Label: "Pause auto refresh if tab is inactive"
  - Default: OFF

Question apache#7: Session persistence
- Answer: YES - Manual refresh preserves auto-refresh settings

Implementation updates:
- Task 1: Add autoRefreshPauseOnInactiveTab state, action, selector
- Task 4: Update hook to respect new setting (default OFF)
- Task 9: Add checkbox to RefreshIntervalModal
- GAP_ANALYSIS: Document all design decisions

Per designer screenshot review:
- Update Task 2 tooltip to show two-line format:
  - Line 1: "Dashboard updated X ago"
  - Line 2: "Auto refresh set to X seconds"
  - Line 3 (optional): Error/delay details
- Add design verification section to GAP_ANALYSIS.md
  - Question pending: Green dot checkmark still needed?
  - Question pending: Checkbox placement in modal

Implements core auto-refresh infrastructure for real-time dashboards:

State Management (Task 1):
- Add AutoRefreshStatus enum and AutoRefreshState interface
- Create Redux actions for status, pause, success/error tracking
- Update dashboardState reducer with auto-refresh handlers
- Add useRealTimeDashboard hook with computed selectors

Status Indicator (Task 2):
- Create StatusIndicatorDot with color-coded status display
- Add StatusTooltipContent with two-line format per design
- Implement debouncing to prevent status flicker
- Support states: success, fetching, delayed, error, paused

Pause/Resume Controls (Task 3):
- Create AutoRefreshControls component for pause/resume
- Integrate with Header component
- Track fetch status in startPeriodicRender

UI Enhancements (Task 9):
- Add 5-second refresh option
- Add "Pause on inactive tab" checkbox
- Update minimum refresh interval to 5 seconds

- Fix import name: setPauseOnInactiveTab -> setAutoRefreshPauseOnInactiveTab
- Add auto-refresh state fields to DashboardState type
- Remove unused imports (AutoRefreshStatus, waitFor) from test files
- Prefix unused ariaLabel parameter with underscore
- Apply Prettier formatting fixes

Task 4: Automatically pause auto-refresh when browser tab is inactive.

New hooks:
- useTabVisibility: Generic hook to track Page Visibility API state
- useAutoRefreshTabPause: Integrates tab visibility with auto-refresh

Features:
- Stops refresh timer when tab becomes hidden (if setting enabled)
- Resumes and immediately refreshes when tab becomes visible
- Respects manual pause state - won't auto-resume if manually paused
- Shows "(tab inactive)" in tooltip when paused due to tab visibility
- Controlled by "Pause on inactive tab" checkbox in RefreshIntervalModal

Integration:
- Add isPausedByTab selector to useRealTimeDashboard hook
- Update Header to use useAutoRefreshTabPause hook
- Update StatusTooltipContent to show tab-paused message

TDD approach with comprehensive test coverage for both hooks.

Task 5: Hide chart loading spinners during auto-refresh cycles while
keeping them for initial load and manual refresh.

New components:
- AutoRefreshContext: Tracks whether an auto-refresh is in progress
- AutoRefreshProvider: Context provider for dashboard page
- useAutoRefreshContext/useIsAutoRefreshing hooks: Access context

Integration:
- Wrap DashboardPage with AutoRefreshProvider
- Header uses startAutoRefresh/endAutoRefresh around periodic refresh
- ChartHolder passes suppressLoadingSpinner to Chart
- Chart.tsx accepts and uses suppressLoadingSpinner prop

Behavior:
- During auto-refresh: Charts show previous data (no spinner flicker)
- During manual refresh: Normal spinner behavior
- During initial load: Normal spinner behavior

TDD approach with test coverage for the context.

Task 6: Preserve filter indicators during auto-refresh cycles to prevent
the FiltersBadge from flickering as charts go into loading state.

Uses the AutoRefreshContext from Task 5 to detect when auto-refresh is
active and skip clearing indicators during the loading phase.

Also renames useAutoRefreshTabPause.test.ts to .tsx for proper JSX support.

Task 7: Remove the warning toast that appeared during every auto-refresh
cycle. The status indicator (Task 2) now provides continuous, non-intrusive
visual feedback about auto-refresh state, making toasts redundant and
distracting at high refresh frequencies.

Also removes unused extendedDayjs import that was only used for toast
message formatting.

Task 8: Add isRefreshing prop to EchartsProps and update Echart component
to disable animations when this prop is true. This reduces visual noise
during auto-refresh cycles.

The infrastructure is in place for animation control. Many ECharts charts
already have animations disabled (Pie, Radar, Gantt, Sankey), and this
provides the foundation for further optimization.

Task 9: Add 5-second auto-refresh interval to support real-time dashboard
use cases. Includes:
- Backend config update with 5-second option and documentation
- Enhanced warning message for low refresh intervals (5-10 seconds)
  to alert users about potential server performance impact

… pause/play icons, and proper positioning

…der and disabling Tree animation

…flat structure

…d remove excessive comments

The DashboardInfo type improvements (TagType[], Role[]) were mistakenly
reverted as noise but are required by the Header's save logic. Also
updates legend test expectations for the legendState ?? {} fix and
applies prettier formatting to FiltersBadge.test.tsx.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>